{extends file="../home.html"}
{block name="title"}{$head_title}{/block}
{block name="css"}
<!-- <link rel="stylesheet" style="text/css" href="__PUBLIC__/Css/front/user_glb.css?version={$version}"> -->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/detail_page.css?version={$version}"/>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/Css/front/front_css/pinglun_loading1.css?version={$version}"/>
<style type="text/css">
	#load_wrapper{
		margin-bottom:2.45rem;
	}
    .circle_state_img .two {
        width: 47%;
        margin-right: 10px;
    }
    .circle_state_img .one {
        width: 100%;
    }
    .circle_state_zan {
   		width:100%;
   		height:2rem;
   		box-sizing:border-box;
   		padding-right:0.5rem;
   		display:flex;
   		align-items:center;
   		position:relative;
   }
   .circle_state_zan .comment_icon{
   		width:2rem;
   		height:2rem;
   		position:absolute;
   		top:0;
   		right:0;
   		overflow:hidden;
   }
   .comment_icon input{
   		display:block;
   		width:2rem;
   		height:2rem;
   		position:absolute;
   		top:0;
   		right:0;
   		border:0;
   		background:none !important;
   		box-sizing:border-box;
   		padding-left:5rem;
   }
   .circle_state_zan .zan_icon{
   		width:2rem;
   		height:2rem;
   		position:absolute;
   		top:0;
   		right:3.6rem;
   		z-index:9;
   }
   .comment_icon span,.zan_icon i{
	   	position:absolute;
	   	top:0;
	   	left:0;
	   	right:0;
	   	bottom:0;
	   	margin:auto;
   }
    /*--评论点赞按钮--*/
    .circle_state_zan .like{
    	display:block;
	    width: 0.85rem;
		height: 0.85rem;
    }
    .circle_state_zan .like-default{
    	background:url(/Public/Images/front/front_img/icon_dianzan_default@3x.png) 0 0 no-repeat;
		background-size:100% 100%;
    }
    .circle_state_zan .like-select{
    	background:url(/Public/Images/front/front_img/icon_dianzan_selected@3x.png) 0 0 no-repeat;
		background-size:100% 100%;
    }
    /*全屏查看器样式*/
    .fullscreen{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 10000;
        background-color: #000;
        display: none;
    }
    .fullscreen .fullscreen_slide{
        background-color: #000;
    }
    .swiper-slide img{
        height: auto;
    }
    h1{
    	width:80%;
    	overflow:hidden;
    	white-space:nowrap;
    	text-overflow:ellipsis;
    }
    .circle_state_img{
    	position:relative;
    }
    .circle_state_img .pic_num{
    	display:block;
    	width:32%;
    	height:4.4rem;
    	background:rgba(0,0,0,0.5);
    	color:rgb(238,238,238);
    	font-size:0.75rem;
    	text-align:center;
    	line-height:4.4rem;
    	position:absolute;
    	right:0;
    	bottom:0;
    }
    .circle_state_zan  .zan_num{
    	color:rgb(153,153,153);
    	font-size:0.65rem;
    	height:2rem;
    	line-height:2.2rem;
    	position:absolute;
    	top:0;
    	left:1.6rem;
    	margin-left:0;
    }
</style>
{/block}
{block name="content"}
{include file="../detail_header.html"}
<div id="load_wrapper">
<div id="scroller">
<div class="teacher-detail project-detail-banner">
        <img src="{$topic.pic}"/>
        <!--导师信息-->
        <div class="teach-name pro-name">
            <div class="clearfix title">
                <h1 class="fl">{$topic.title}</h1>
                <span class="fr address">收藏</span>
                <span class="fr icon {if $topic.is_collect}icon_like_selected3x{else}icon_like_default3x{/if} collect-icon collect" data-topic_id='{$topic.topic_id}'></span>
            </div>
            <ul>
                <li class="clearfix mg-top0">
                    <span class="fl">收藏人数</span>
                    <p class="fl collect_num">{$topic.collect_num}人</p>
                </li>
                <li class="clearfix">
                    <span class="fl">评论人数</span>
                    <p class="fl">{$topic.view_num}条</p>
                </li>
            </ul>
        </div>
        
    </div>
    <p class="teach-cont" style="margin-bottom:.5rem;">
        {$topic.contents}
    </p>

<div class="circle_main main">
    {foreach from=$view_list item=v}
    <div class="circle_state">
        <div class="circle_state_user">
            <img src="{$v.headimgurl}" alt="" />
            <h6>{$v.realname}</h6>
            <span>{$v.position}</span>
        </div>
        <div class="circle_state_cont">
            <p>{$v.contents}</p>
        </div>
        <div class="circle_state_img clearfix">
            {if $v.imgs}
            {if count($v.imgs) >= 3}
            <span class="pic_num">{count($v.imgs)}张</span>
            {foreach from=$v.imgs item=img key=key}
            {if $key <= 2}
            <img src="{$img}" class="dynamic_img{if $key == 0} fl dl_img{elseif $key == 1} fr dr_img dr_one{elseif $key == 2} fr dr_img{/if}" data-row="{$key}" data-img="{$img}" />
            {else}
            <div class="dynamic_img hide" data-row="{$key}" data-img="{$img}"></div>
            {/if}
            {/foreach}
            {elseif count($v.imgs) == 2}
            {foreach from=$v.imgs item=img key=key}
            <img src="{$img}" class="dynamic_img fl two" data-row="{$key}"  data-img="{$img}" />
            {/foreach}
            {elseif count($v.imgs) == 1}

            {foreach from=$v.imgs item=img}
            <img src="{$img}" class="dynamic_img fl one" data-row="0"  data-img="{$img}"/>
            {/foreach}
            {/if}
            {/if}
        </div>
        <div class="circle_state_zan clearfix">
            <p class="fl">{$v.addtime}</p>
            <div class="zan_icon" onclick="dianZan($(this))">
				<i class="like {if $v.is_praise}like-select{else}like-default{/if}" data-id='{$v.view_id}' data-praise_type='view'></i>
				<span class="zan_num" data-zan="{$v.praise_num}">{if $v.praise_num > 999}(999+){else}({$v.praise_num}){/if}</span>
			</div>
			<div class="comment_icon">
				<span class="icon icon_pinglun3x"></span>
				<input type="text" class="input_icon" data-id='{$v.view_id}'/>
			</div>
        </div>
        <!--评论内容-->
		<ul class="comment_cont" data-id='{$v.view_id}'> 
			{foreach from=$v.comment_list item=comment}
			<li class="com_list clearfix">
				<div class="list_title fl">
					<span class="first_word name" >{$comment.from_nickname}</span>
					{if $comment.reply_comment_id}
					<span class="hf_word">回复</span>
					<span class="last_word name">{$comment.to_nickname}</span>
					{/if}
					：<span class="info_word">{$comment.contents}</span>
				</div>
				<input type="text" class="show_keybord" data-user_id="{$comment.user_id}" data-comment_id="{$comment.comment_id}" />
			</li>
			{/foreach}
			<!-- <li class="com_list clearfix">
				<div class="list_title fl">
					<span class="first_word name" >张斌</span>
					<span class="hf_word">回复</span>
					<span class="last_word name">斌张</span>：
					<span class="info_word">张斌的评论评论内容评论内容评论内容评论内容评论内容</span>
				</div>
				<input type="text" class="show_keybord" />
			</li> -->
		</ul>
    </div>
    {/foreach}
</div>
	<div id="pullUp">
        <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载...</span>
    </div>
</div>
</div>
<a onclick="check_user('/FrontEnjoy/add_view/topic_id/{$topic.topic_id}')" class="submit_btn">发表观点</a>
<!--<a href="/FrontEnjoy/add_view/topic_id/{$topic.topic_id}" class="submit_btn">发表观点</a>-->
<!-- 全屏图片查看器 -->
<div class="swiper-container fullscreen" id="fullscreen">
    <div class="swiper-wrapper" id="swiper_wrapper">
    </div>
</div>
<div class="comment_input_wrap comment_hide">
	<input type="text" class="comment_input" placeholder="说点什么吧..." />
	<span class="comment_send no_send">发送</span>
</div>
{/block}
{block name="js"}
<script>
    var total = '{$total}'
    var firstRow ='{$firstRow}'
    var topic_id ='{$topic_id}'
    var share_pic = '{$topic.pic}';
    var share_title = '{$topic.title}';
    var desc_str = $('.circle_state_cont').html().replace(/[\r\n]/g,"");
    
    var share_desc = desc_str.substr(0,30);
    var share_url = document.location.href;
</script>
{literal}
<script type="text/javascript" src="__PUBLIC__/Js/front/swiper.3.1.2.jquery.min.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/iscroll.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/topic_details_list.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/circle.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/front_js/comment_cont.js"></script>
        <script type="text/javascript">
                /*$(window).load(function() {
                });*/

            $(function()
            {
                $(".service_header i,.service_header span").on("click",function()
                {
                    history.go(-1);
                });
            });
            //收藏
			$(".pro-name .collect").on("click",function(){
				var obj = $(this);
                if($(this).hasClass('icon_like_selected3x')){
                    var type = 0;//取消
                }else{
                    var type = 1;//收藏
                }
                var topic_id = $(this).data('topic_id');
                console.log(topic_id);
                $.ajax({
                    url:'/FrontEnjoy/collect_topic',
                    type:'post',
                    data:{topic_id:topic_id, type:type},
                    success:function(r){
                        if(r.code == 0){
                            obj.toggleClass("icon_like_default3x").toggleClass("icon_like_selected3x");
                            if(type == 0){
                                var collect_num = parseInt($('.collect_num').html()) - 1;
                            }else{
                                var collect_num = parseInt($('.collect_num').html()) + 1;
                            }
                            $('.collect_num').html(collect_num);
                            layer.open({
                                content: r.msg,
                                title: false,
                                btn: ['确定'],
                            });
                        }else{
                            layer.open({
                                content: r.msg,
                                title: false,
                                btn: ['确定'],
                            });
                        }
                    }
                })
			});

        //图片查看器
        $(function(){
            $(document).on('click', '.dynamic_img', function(event) {
                event.preventDefault();
                var row = $(this).data('row');
                var img_urls = [];
                $(this).parent().children('.dynamic_img').each(function() {
                    img_urls.push($(this).data("img"));
                });
                var html = '';
                for(i=0;i<img_urls.length;i++){
                    html += '<div class="swiper-slide fullscreen_slide"><img src="'+img_urls[i]+'"/></div>';
                }
                $('#swiper_wrapper').empty().append(html);
                console.log(img_urls);
                $('#fullscreen').show();
                var full_swiper = new Swiper('.fullscreen',{
                    //pagination : '.full_pagination',
                });
                full_swiper.slideTo(row, 100, false);
                
            });
            // 关闭查看器
            $('#fullscreen').on('click', function(event) {
                event.preventDefault();
                $(this).hide();
            });
        })
        </script>
{/literal}
{/block}